const{resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin =require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const loader = require('sass-loader');

let isInnerCss=false;                       //打包时采用内联CSS或者单独CSS文件的开关
let styleLoader='style-loader';             
let cssLoader='css-loader';                 
let lessLoader='less-loader';               
let sassLoader='sass-loader';               
let postCssloader='postcss-loader';         //浏览器兼容打包支持加载器，暂时无效，以后再看
module.exports={
    /**
     * js入口文件
     */
    entry:{
        index:"./src/js/index.js",
        second:"./src/js/second.js"
    },
    /**
     * js输出文件
     */
    output:{
        filename:'[name].js',
        path:resolve(__dirname,'build')
        // ,assetModuleFilename: 'images/[name][ext][query]'
    },
    /**
     * 插件
     */
    plugins:[
        new HtmlWebpackPlugin({                     //html文件打包插件
            template:"./src/html/index.html",
            filename:"index.html",
            chunks:['index'],                       //需要加载的压缩js文件
            minify:{                                //压缩配置
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        new HtmlWebpackPlugin({                     //html文件打包插件
            template:"./src/html/second.html",
            filename:"second.html",
            chunks:['second'],                      //需要加载的压缩js文件
            minify:{                                //压缩配置
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        new MiniCssExtractPlugin({                  //单独css文件打包加载插件
            filename:'[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin()        //CSS压缩插件
    ],
    module:{
        rules:[
            {
                test:/\.css$/,                                              //文件匹配正则表达式
                use:[                                                       //打包处理器,有先后顺序，从下往上边执行
                    isInnerCss?styleLoader:MiniCssExtractPlugin.loader,
                    cssLoader,
                    postCssloader
                ]
            },
            {
                test:/\.less$/,
                use:[
                    isInnerCss?styleLoader:MiniCssExtractPlugin.loader,
                    cssLoader,
                    lessLoader
                ]
            },
            {
                test:/\.scss$/,
                use:[
                    isInnerCss?styleLoader:MiniCssExtractPlugin.loader,
                    cssLoader,
                    sassLoader
                ]
            },
            {
                test:/\.(png|jpg|jpeg|gif)$/,           //资源文件打包处理
                type:'asset/resource',
                generator:{
                    filename:'images/[name][ext][query]'
                }
            },
            {
                test:/\.html$/,                         //html内资源URL处理，好像没啥效果
                loader:'html-loader'
            }
        ]
    }
}